<template>
    <div>

      <!-- Table表 -->
      <el-table
        :data="tableData"
        :summary-method="getSummaries" show-summary
        @row-click="handle"
        style="width: 100%"
        height="566px">
        <el-table-column
          fixed
          prop="goodsId"
          label="商品id"
          width="150"
          >
        </el-table-column>
        <el-table-column
          prop="goodsType"
          label="商品类型"
          width="120">
        </el-table-column>

        <el-table-column
          prop="goodsJoinTime"
          label="入库时间"
          width="200">
        </el-table-column>
        <el-table-column
          prop="goodsSuppliersName"
          label="供货商"
          width="130">
        </el-table-column>
        <el-table-column
          prop="goodsUserName"
          label="入库人"
          width="130">
        </el-table-column>
        <el-table-column
          prop="goodsPrice"
          label="商品价格"
          width="150">
        </el-table-column>
        <el-table-column
          prop="goodsNums"
          label="商品数量"
          width="150">
        </el-table-column>
        <el-table-column
          label="操作"
          width="80">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="dialogFormVisible = true">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="page"
        :total="88">
      </el-pagination>

     <!-- 模态框 -->
     <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="商品类型" :label-width="formLabelWidth">
            <el-input v-model="form.goodsType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入库时间" :label-width="formLabelWidth">
            <el-input v-model="form.goodsJoinTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入库人" :label-width="formLabelWidth">
            <el-input v-model="form.goodsUserName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="供货商" :label-width="formLabelWidth">
            <el-input v-model="form.goodsSuppliersName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" :label-width="formLabelWidth">
            <el-input v-model="form.goodsPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" :label-width="formLabelWidth">
            <el-input v-model="form.goodsNums" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insert">确 定</el-button>
        </div>
    </el-dialog>
</div>
  </template>

  <script>
  import axios from 'axios'
// import { handle } from 'express/lib/application'

    export default {
      created() {
        const _this = this

        axios.all([axios.get('http://localhost:8080/user/sgoods?current=1&size=10'),
                   axios.get('http://localhost:8080/user/types'),
                   axios.get('http://localhost:8080/user/goodsSuppliers')])
              .then(axios.spread((res1,res2,res3) => {
                    console.log(res1);
                    _this.tableData = res1.data.data.goods
                    _this.types = res2.data.data
                    _this.suppliers = res3.data.data
        }))
      },
      data(){
        return {
        types:[{
            id:1,
            name:'玩具'
          },
            {
              id:2,
              name:'牛奶'
            }
          ],

        suppliers:[
            {
              id:1,
            name:'admin'
          },
            {
              id:2,
              name:'牛奶'
            }

          ],

        tableData: [{
            goodsId:null,
            goodsJoinTime:null,
            goodsNums:null,
            goodsPrice:null,
            goodsSuppliersName:null,
            goodsType:null,
            goodsUserName:null
          }
      ],
        typename:'',
        supplier:'',
        // 对话框显示与否
        dialogFormVisible: false,
        form: {
            goodsId:1,
            goodsJoinTime:2,
            goodsNums:3,
            goodsPrice:5,
            goodsSuppliersName:6,
            goodsType:5,
            goodsUserName:5,
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
                    }
                },
      methods:{
        getInfo(event){
          const _this = this
          this.$http.get('http://localhost:8080/user/sgoods?current=1&size=6',{params:{type:this.typename,suppliersName:this.supplier}})
          .then(function(resp){
             _this.tableData = resp.data.data.goods
          })
        },
        page(currentPage){
          const _this = this
          this.$http.get('http://localhost:8080/user/sgoods',{params:{current:currentPage,size:10,type:this.typename,suppliersName:this.supplier}})
          .then(function(resp){
             _this.tableData = resp.data.data.goods
          })
        },
        insert(event){
            this.dialogFormVisible=false
            axios.post('http://localhost:8080/user/goods/insert',this.form)
            // "goodsType:this.form.type,goodsPrice:this.form.price,goodsNums:this.form.num,goodsJoinTome:this.form.data,googsUserName:this.form.name,goodsSuppliersName:this.form.supplier")
            .then(function(resp){
                if(resp.data.code==200){
                    alter("添加成功！")
                }
                else{
                    alter("服务器出错！请重试")
                }
            })
        },
        handle(row){
            this.form = row
            this.dialogFormVisible=true
        }
      }
    }
  </script>
